<!--
[{id: '', goodsId: '', name: ''}]
-->
<template>
    <el-dialog title="选择箱起活动" :visible.sync="showGoodsPop" class="el-dialog-edit" :close-on-click-modal="false">
        <el-form label-position="left" label-width="120px" style="width: 100%; padding-left: 20px;">
            <el-form-item label="所选箱起活动：" v-if="count !== 1">
                <div class="el-tag-box">
                    <el-tag v-for="(boxs, index) of boxCheck" :key="boxs.seriesId" :closable="true" @close="delGoods(index)">{{boxs.seriesName}}</el-tag>
                </div>
            </el-form-item>
        </el-form>
        <el-form ref="searchForm" class="search-block" :model="listQuery" label-position="left" label-width="120px" style="width: 100%">
            <input type="text" style="display: none"/><!--form input placeholder-->
            <el-row :gutter="50">
                <el-col :xs="24">
                    <el-form-item label="箱起活动名称：" prop="seriesName">
                        <el-input @keyup.enter.native="search" v-model="listQuery.seriesName" placeholder="按箱起活动名称搜索" maxlength="50" clearable></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="" class="btn-item">
                <el-button type="primary" size="mini" icon="el-icon-search" plain @click="search">搜索</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border @row-click="clickRow">
            <el-table-column align="center" width="50">
                <template slot-scope="scope">
                    <label class="input-radio" v-if="count === 1">
                        <input type="radio"  :value="{seriesId: scope.row.seriesId, seriesName: scope.row.seriesName, boxGoodsDTOS: scope.row.boxGoodsDTOS, isSell: scope.row.isSell, upshelf: scope.row.upshelf, continuePiece: scope.row.continuePiece, firstPiece: scope.row.firstPiece}" v-model="boxRadio"/>
                        <span></span>
                    </label>
                    <label class="input-checkbox" v-else>
                        <input type="checkbox" :disabled="isDisabled(scope.row.seriesId)"   :value="{ seriesId: scope.row.seriesId, seriesName: scope.row.seriesName, boxGoodsDTOS: scope.row.boxGoodsDTOS , isSell: scope.row.isSell, upshelf: scope.row.upshelf}" v-model="boxCheck"/>
                        <span></span>
                    </label>
                </template>
            </el-table-column>
            <el-table-column align="center" label="箱起活动名称">
                <template slot-scope="scope">
                    <div class="text-justify">
                        <p v-text="scope.row.seriesName"></p>
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" label="是否上架">
                <template slot-scope="scope">
                    <div class="text-justify">
                        <span>{{scope.row.upshelf===0?'否':'是'}}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" label="是否售卖" >
               <template slot-scope="scope">
                    <div class="text-justify">
                        <span>{{scope.row.isSell===0?'否':'是'}}</span>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" :loading="btnDisabled" @click="chooseGoods">确定</el-button>
            <el-button @click="close">取消</el-button>
        </div>
    </el-dialog>
</template>

<script>
    export default {
        name: 'boxSeries',
        props: {
            check: {
                type: Array,
                default() {
                    return [];
                }
            },
            count: {
                type: Number,
                default: -1
            },
            seriesType: {
                type: Number,
                default: 0
            },
            hasSelected: {
                type: Array,
                default() {
                    return [];
                }
            }
        },
        data() {
            return {
                list: [],
                listQuery: {
                    seriesName: ''
                },
                showGoodsPop: true,
                boxCheck: this.check,
                boxRadio: {},
                listLoading: false,
                btnDisabled: false
            }
        },
        created() {
            this.getList()
            if (this.count === 1 && this.check.length > 0) {
                this.boxRadio = this.check[0];
            }
        },
        methods: {
            // 获取列表
            getList() {
                this.listLoading = true
                let baseU = '/bsnl-product/box/bonus/config/series?seriesName='
                let boxUrl = ''
                if(this.seriesType === 2) {
                    boxUrl = baseU + this.listQuery.seriesName
                }else{
                    boxUrl = baseU + this.listQuery.seriesName + '&seriesType=' + this.seriesType
                }
                this.request({
                    url: boxUrl,
                    method: 'get'
                }).then(({data, totalCount}) => {
                    this.list = data;
                    this.listTotal = totalCount;
                    this.listLoading = false;
                }).catch(err => {
                    this.list = [];
                    this.listTotal = 0;
                    this.listLoading = false;
                });
            },
            isDisabled(seriesId) {
                if(this.hasSelected.length>0){
                    let aaa = true
                    this.hasSelected.forEach((item) =>{
                        if(item.seriesId === seriesId) {
                            aaa = false
                        }
                    })
                    if(aaa) {
                        return false
                    } else {
                        return true
                    }
                } else {
                    return false
                }
            },
            // 单击行
            clickRow({seriesId, seriesName, boxGoodsDTOS, isSell, upshelf, continuePiece, firstPiece }) {
                if (this.count === 1) {
                    this.boxRadio = {
                        seriesId,
                        seriesName,
                        boxGoodsDTOS,
                        isSell,
                        upshelf,
                        continuePiece,
                        firstPiece
                    }
                    return false;
                }
                let index = this.boxCheck.findIndex(item => item.seriesId === seriesId);
                if (index < 0) {
                    this.boxCheck.push({
                        seriesId,
                        seriesName,
                        boxGoodsDTOS,
                        isSell,
                        upshelf
                    });
                } else {
                    if(this.hasSelected.length>0){
                        let aaa = true
                        this.hasSelected.forEach((item) =>{
                            if(item.seriesId === this.boxCheck[index].seriesId) {
                                this.$message.error('之前添加的箱起活动不支持删除')
                                aaa = false
                            }
                        })
                        if(aaa) {
                            this.boxCheck.splice(index, 1)
                        }
                    } else {
                        this.boxCheck.splice(index, 1)
                    }
                }
            },
            // 通过tag删除
            delGoods(index) {
                if(this.hasSelected.length>0) {
                    let aaa = true
                    this.hasSelected.forEach((item) =>{
                        if(item.seriesId === this.boxCheck[index].seriesId) {
                            this.$message.error('之前添加的箱起活动不支持删除')
                            aaa = false
                        }
                    })
                    if(aaa) {
                        this.boxCheck.splice(index, 1)
                    }
                } else {
                    this.boxCheck.splice(index, 1)
                }
                
            },
            // 选择商品
            chooseGoods() {
                if(this.count === 1){
                    this.boxCheck = [this.boxRadio]
                }
                if(this.boxCheck.length < 1){
                    return this.$message.error('请选择商品');
                }
                if(this.count > 0 && this.boxCheck.length > this.count){
                    return this.$message.error(`最多选择${this.count}个商品`);
                }
                console.log(this.boxCheck)
                this.$emit('choose', this.boxCheck);
                this.close();
            },
            // 关闭弹窗
            close() {
                this.showGoodsPop = false;
                document.body.removeChild(this.$el);
            },
            // 搜索
            search() {
                this.getList();
            }
        }
    }
</script>
